<template>
  <t-dialog
    :visible="visible"
    :header="title"
    :confirm-btn="{ content: confirmText, theme: confirmTheme }"
    :cancel-btn="{ content: cancelText }"
    :close-on-overlay-click="false"
    @update:visible="(val) => emit('update:visible', val)"
    @confirm="onConfirm"
    @cancel="onCancel"
  >
    <template v-if="$slots.default">
      <slot />
    </template>
    <template v-else>
      <div class="dialog-content">
        <t-icon v-if="showIcon" :name="icon" :style="{ color: iconColor }" />
        <span class="content-text">{{ content }}</span>
      </div>
    </template>
  </t-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  visible: boolean;
  title?: string;
  content?: string;
  confirmText?: string;
  cancelText?: string;
  confirmTheme?: 'default' | 'primary' | 'danger' | 'warning' | 'success';
  showIcon?: boolean;
  icon?: string;
  type?: 'info' | 'warning' | 'error' | 'success';
}

const props = withDefaults(defineProps<Props>(), {
  title: '确认',
  confirmText: '确定',
  cancelText: '取消',
  confirmTheme: 'primary',
  showIcon: true,
  icon: 'help-circle',
  type: 'info'
});

const emit = defineEmits<{
  'update:visible': [value: boolean];
  'confirm': [];
  'cancel': [];
}>();

// 根据类型设置图标颜色
const iconColor = computed(() => {
  switch (props.type) {
    case 'warning':
      return 'var(--td-warning-color)';
    case 'error':
      return 'var(--td-error-color)';
    case 'success':
      return 'var(--td-success-color)';
    default:
      return 'var(--td-brand-color)';
  }
});

const onConfirm = () => {
  emit('confirm');
};

const onCancel = () => {
  emit('update:visible', false);
  emit('cancel');
};
</script>

<style lang="less" scoped>
.dialog-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;

  .t-icon {
    font-size: 24px;
  }

  .content-text {
    font-size: 14px;
    line-height: 22px;
  }
}
</style> 